import React from 'react';
import { Form,Table, Icon, Tag, Modal, Steps, Button, message,Input,Row,Col,Select,DatePicker,InputNumber,Badge } from 'antd'
import moment from 'moment';
import { METHODS } from 'http';
const Step = Steps.Step;
const confirm = Modal.confirm
const FormItem = Form.Item;
const Option = Select.Option;

class ChangeDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          current: 0,
          value:'',
          bottons:'查看',
          previewVisible:false,
	      previewImage:'',
        };
      }
        show(){
            const {showList} = this.props
            showList()
        }
        delete(){
            const {onDeleteItem,info} = this.props
            onDeleteItem(info.document.id)
        }
      bottonClick(i){
        if (document.getElementById(i).style.display != "block") {
            document.getElementById(i).style.display = 'block'
        } else {
            document.getElementById(i).style.display = 'none'
        }
          if(this.state.bottons == '查看'){
              this.setState({bottons:"隐藏"})
          }else{
              this.setState({bottons:"查看"})
          }
      }
      imgClick = e => {
          this.setState({previewVisible:true,previewImage:e.target.src})
      }
      handleCancel = () => {
        this.setState({previewVisible:false})
      }
      render(){
        const {infoDetais1} = this.props
		const { previewVisible,previewImage } = this.state
		const formItemLayout = {
	        labelCol: { span: 4 },
	        wrapperCol: { span: 16 },
	      };
		var list =[]
		var applyList = []
		var photoPage =[]
		var Opinion = []

		if(infoDetais1!= undefined || infoDetais1!= ''){
			if(!infoDetais1){
				return null
			}
			
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案年度:{infoDetais1.documentNotarialBackup.documentYear}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证事项:{infoDetais1.documentNotarialBackup.notarialMatters}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>申请人:{infoDetais1.documentNotarialBackup.applyName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>收件日期:{moment(infoDetais1.documentNotarialBackup.createdTime).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证日期:{moment(infoDetais1.documentNotarialBackup.notarizationAt).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>保管日期:{infoDetais1.documentNotarialBackup.storageLife}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案页数:{infoDetais1.documentNotarialBackup.pageNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>承办人:{infoDetais1.documentNotarialBackup.contractorUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档人:{infoDetais1.documentNotarialBackup.createdUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证号:{infoDetais1.documentNotarialBackup.notaryNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案类型:{infoDetais1.documentNotarialBackup.documentType}</li>)

			// if(details.document.application != undefined){
			// 	applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"创建人"}:{details.document.application.applicantName}</li>)
			// 	applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"创建时间"}:{moment(details.document.application.createdTime).format("YYYY-MM-DD HH:mm:ss")}</li>)
			// 	applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"审核人"}:{details.document.application.auditorName == '' ? '暂无':details.document.application.auditorName}</li>)
			// 	applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"审核人"}:
			// 	{details.document.application.state == 0 ?
			// 		<span style={{marginLeft:10}}><Badge status="processing" /><span>申请中</span></span>:
			// 		details.document.application.state == 1 ?
			// 		<span style={{marginLeft:10}}><Badge status="success" /><span>通过</span></span>:
			// 		<span style={{marginLeft:10}}><Badge status="error" /><span>拒绝</span></span>
			// 	}</li>)
			// 	applyList.push(<li style={{width:"100%",lineHeight:"40px"}}>{"审核意见"}:{details.document.application.opinion}</li>)
			// }
//			var menu = JSON.parse(details.document.basicInfo)
			var pages = infoDetais1.documentNotarialBackup.documentBillList
//			for(let i=0;i<menu.length;i++){
//				list.push(<li key={i} style={{width:"50%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
//			}
			for(let i=0;i<pages.length;i++){
				photoPage.push(
					<div>
						<div style={{ display: "flex", justifyContent: "space-between", margin: "10px 20px", background: "#f4f4f4", lineHeight: "50px", borderRadius: 5 }}>
							<span style={{ marginLeft: 10,fontWeight:600 }}>{i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]</span>
							<div style={{marginRight:10}}>
								<Button type="primary"
									onClick={this.bottonClick.bind(this, i)}
									style={{ border: "1px solid #DDDDDD", marginRight: 10, color: "black", backgroundImage: "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)" }}>
									查看
								</Button>
							</div>
						</div>
						<div id={i} style={{ overflow: "scroll", height: "200px", margin: "0 40px", display: "none" }}>
							<div className="clearfix">
								{
									pages[i].billfileList.map((item,i)=>{
										return(
											<img onClick={this.imgClick} src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") +"&"+ "sys=1001" } style={{ width: 80, margin: 5 }} />
										)
									})
								}
							</div>

						</div>
					</div>
				)	
			}
		}
		
		return (
	     	<div>
				<div style={{marginBootm:30}}>
					<span style={{fontSize:20,marginLeft:20,fontWeight:600}}>档案信息:</span>
					<br/>
					<ul style={{display:"flex",flexWrap:"wrap",margin:"0 10px",marginLeft:40,width:"50%"}}>
						{list}
					</ul>
				</div>
		        <div className="listLib">
	            		<span style={{fontSize:20,marginLeft:20,fontWeight:600}}>卷宗目录:</span>
	            		<div style={{width:'50%'}}>
	            		{photoPage}
            		</div>
            		{/*审核信息*/}
            		
            </div>
            <div style={{width:"50%"}}>
            		{Opinion}
            </div>
            {/* <Button style={{width:200,marginTop:30,height:40}} type="primary" onClick={this.showReturn.bind(this)}>返回</Button> */}
			<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
				<img alt="example" style={{ width: '100%' }} src={previewImage} />
			</Modal>
	     </div>
	  	)
}
}

export default ChangeDetails